<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-table :data="couponList">
        <el-table-column label="优惠券编号" align="center" prop="couponId">
            <template slot-scope="scope">
                <iframe
                        :src="'http://wechat.free.idcfengye.com/coupon/'+scope.row.couponId+'.html'"
                        width="100%"
                        frameborder="0"
                        scrolling="no"></iframe>
                <el-button
                        size="medium "
                        type="primary"
                        icon="el-icon-button"
                        @click="receiveCoupon(scope.row.couponId)"
                >领取优惠券
                </el-button>
            </template>
        </el-table-column>
    </el-table>

</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                url:'1651829102455308288',
                info: {
                    storeId: "",
                    tableId: '',
                    openId: ''
                },
                couponTypeList: [],
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 优惠券表格数据
                couponList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    couponTypeId: null,
                    lesseeId: null,
                    couponName: null,
                    statTime: null,
                    endTime: null,
                    faceValue: null,
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {},
                dialogVisible: false,
                htmlResource: '',
                //领取优惠券ID
                couponId: '',
            };
        },
        created() {
            this.getList();
            var params = location.search.substring(1);
            var array = params.split("&");
            for (var i in array) {
                var param=array[i].split("=");
                this.info[param[0]]=param[1];
            }
            console.log(this.info.openId)
        },
        methods: {
            /** 查询优惠券列表 */
            getList() {
                axios.get('http://wechart.5gzvip.91tunnel.com/wechat/coupons',{params:this.queryParams}).then(response => {
                    this.couponList = response.data.rows;
                });
            },
            receiveCoupon(couponId) {
                axios.put('http://wechart.5gzvip.91tunnel.com/wechat/coupon/'+couponId+'/'+this.info.openId).then(resp=>{
                    if(resp.data.code==200){
                        this.$message.success("领取成功!")
                    }else{
                        this.$message.error(resp.data.msg)
                    }
                })
            },
        }
    });

</script>
</html>
